<template>
  <div><h2>教师考勤</h2>
   <el-row :gutter="20" style="margin-left:39px;text-align:center; margin-bottom:68px">
    <el-col :span="4"><el-input v-model="nameinput" placeholder="请输入教师姓名" type="text" /></el-col>
    <el-col :span="5" ><el-input v-model="numinput" placeholder="请输入教师电话" type="number" /></el-col>
    <el-col :span="11" ></el-col>
    <el-col :span="3" ><el-button type="primary" style="width:160px;height:40px;" @click="submit">查询</el-button></el-col>
    <el-col :span="1" ></el-col>
  </el-row>
  <el-row :gutter="20" style="margin-left: 39px;" class="tealist">
    <el-col :span="2"></el-col>
    <el-col :span="2">申请人</el-col>
    <el-col :span="4" >申请时间</el-col>
    <el-col :span="3" >请假原因</el-col>
    <el-col :span="4">上课时间</el-col>
    <el-col :span="2" >代课老师</el-col>
    <el-col :span="3" >审核状态</el-col>
    <el-col :span="2" >审核人</el-col>
    <el-col :span="2" >操作</el-col>
    
  </el-row>
  <div class="box" style="height:365px">
  <el-row :gutter="20" style="margin-left: 39px;" class="listdata"
  v-for="(jskq,index) in newdata" :key="jskq"
  >
    <el-col :span="2"><el-checkbox-group
    v-model="flag"
    @change="handleCheckedCitiesChange"
  >
    <el-checkbox></el-checkbox>
  </el-checkbox-group></el-col>
    <el-col :span="2"><div>{{jskq.teacher}}</div> </el-col>
    <el-col :span="4" >{{jskq.sqtime}}</el-col>
    <el-col :span="3" >{{jskq.sqwhy}}</el-col>
    <el-col :span="4">{{jskq.sktime}}</el-col>
    <el-col :span="2" >{{jskq.dkteacher}}</el-col>
    <el-col :span="3" >{{jskq.shzt}}</el-col>
    <el-col :span="2" >管理员</el-col>
    <el-col :span="2" style="text-align:left;display:flex;cursor: pointer;" @click="sh(index)"><el-icon><tools /></el-icon><p>审核</p></el-col>
    
  </el-row></div>
    <el-row :gutter="20" style="margin-left: 39px;" class="allchoose">
    <el-col :span="3" style="text-align:center;line-height:35px;font-size:18px;" ><el-checkbox
    v-model="flag"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
    >全选</el-checkbox
  ></el-col>
    <el-col :span="2"><el-button>发短信</el-button></el-col>
    <el-col :span="2"><el-button>发邮件</el-button></el-col>
    <el-col :span="5" ></el-col>
    <el-col :span="12" > <el-pagination
      v-model:currentPage="currentPage2"
      v-model:page-size="pagenum"
      :page-sizes="[8, 5, 3, 1]"
      :small="false"
      :pageSize="pagenum"
      :disabled="disabled"
      :background="true"
      layout="sizes, prev, pager, next"
      :total="20"
      :curuent-page="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"  
    >
    </el-pagination></el-col>
    
    
    
  </el-row>
  <div class="shzt" :style="show"><div class="shzt_top"></div>
  <el-row  >
    <el-col :span="5" ></el-col>
    <el-col :span="6" ><input type="radio" name="radio" value="审核未通过"  v-model="shenhe"> &emsp;审核未通过</el-col>
    <el-col :span="7"><input type="radio" name="radio" value="审核通过" v-model="shenhe">&emsp;审核通过</el-col>
    <el-col :span="4"></el-col>
     </el-row>
  
 
  <el-row gutter="20" >
    <el-col :span="12" ></el-col>
    <el-col :span="6"><el-button @click="yes(shenhe)">确定</el-button></el-col>
    <el-col :span="6"><el-button style="background:#457DFB" @click="no">取消</el-button></el-col> </el-row></div>
  </div>
</template>

<script>
import jskqdata from "../../../mockjs/jskqdata.js";
import { Tools } from "@element-plus/icons-vue";
console.log(jskqdata.data);
let newdata = jskqdata.data.slice(0, 8);
// console.log();
// this.shenhe = null;

export default {
  data() {
    return {
      jskqdata,
      newdata,
      pagenum: 8,
      page: 1,
      flag: false,
      nameinput: "",
      numinput: "",
      show: "display:none",
      shenhe: "",
      singleindex: ""
      // isIndeterminate: "false"
    };
  },

  methods: {
    no() {
      this.show = "display:none";
    },
    sh(index) {
      this.show = "display:block";

      this.singleindex = index;
      console.log(this.singleindex);
      // console.log(zt);
    },
    yes() {
      // if (this.curname != "") {
      // this.singleindex = index;
      this.newdata = this.jskqdata.data.filter(value => {
        console.log(value.id);

        if (value.id === this.singleindex) {
          // console.log(value);
          // console.log(value.id);

          value.shzt = this.shenhe;

          // console.log(value.class);
        }
        return this.jskqdata.data;
      });
      this.newdata = this.newdata.slice(0, this.pagenum);
      this.show = "display:none";
      // }
    },
    // yes(shenhe) {
    //   console.log(shenhe);

    //   this.zt = shenhe;
    //   console.log(this.zt);
    // },
    submit() {
      this.newdata = jskqdata.data.filter(value => {
        if (value.teacher === this.nameinput) {
          return value;
          // this.newdata = value;
          // console.log(value);
          // console.log(this.newdata);

          // return false;
        }
      });
    },
    // 全选
    allc() {
      if (this.flag === false) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },

    // smallc() {
    //   if (this.flag === false) {
    //     this.flag = true;
    //   } else {
    //     this.flag = false;
    //   }
    // },
    handleSizeChange(page) {
      // page = 1;
      // this.page = 1;
      page = 1;
      this.page = page;
      console.log(page);

      console.log(this.pagenum);
      this.newdata = this.jskqdata.data.slice(
        0 + this.pagenum * (page - 1),
        this.pagenum + this.pagenum * (page - 1)
      );
      this.handleCurrentChange(page);
      // this.handleCurrentChange = true;
      // handleCurrentChange(page);
    },
    handleCurrentChange(page) {
      console.log(page);
      this.page = page;
      this.newdata = this.jskqdata.data.slice(
        0 + this.pagenum * (page - 1),
        this.pagenum + this.pagenum * (page - 1)
      );
      console.log(this.newdata);
    }
  },
  onmounted: {
    //
    // handleCurrentChange(index) {
    //   console.log(index);
    // }
  },
  components: { tools: Tools }
};
// console.log(this.shenhe);
</script>

<style lang="less" scoped>
h2 {
  margin-top: 18px;
  margin-left: 19px;
  margin-bottom: 40px;
  font-size: 18px;
}
.tealist {
  width: 1200px;
  height: 50px;
  text-align: center;
  margin-top: 60px;
  .el-col {
    line-height: 50px;
    font-size: 18px;
    background: #acc5ff;
  }
}
.listdata {
  width: 1200px;
  height: 40px;
  text-align: center;
  .el-col {
    line-height: 40px;
    font-size: 18px;
    background: #d1d5e0;
    .el-icon {
      align-self: center;
      color: #457dfb;
    }
    p {
      margin-left: 6px;
      color: #457dfb;
    }
  }
}
input {
  width: 20px;
  height: 20px;
  margin-top: 12px;
}
.allchoose {
  width: 1200px;
  height: 40px;
  text-align: center;
  margin-top: 30px;
  .el-col {
    line-height: 40px;
    font-size: 18px;
    // background: #d1d5e0;
  }
  input {
    margin-right: 12px;
  }
}
.shzt {
  background: white;
  width: 600px;
  height: 320px;
  position: absolute;
  z-index: 2;
  // margin: 0 auto;
  top: 50%;
  top: 25%;
  left: 30%;
  .shzt_top {
    width: 100%;
    height: 40px;
    background: #457dfb;
  }
  .el-row {
    text-align: center;
    font-size: 18px;
    width: 100%;
    height: 80px;
    margin-top: 7%;
    .el-col {
      align-self: center;
      padding: 0;

      // border-top: 1px solid #bfbfbf;
      .el-button {
        height: 40px;
        width: 120px;
        background: #bfbfbf;
      }
    }
  }
}
</style>
